import BasePage from '@/components/BasePage'
import SmartCityTabs from '@/components/SmartCityTabs'
import Card, { type CardData } from './components/Card'
import { useState } from 'react'

const tabDatas = [
    {
        key: "1",
        title: "智慧城市家具"
    },
    {
        key: "2",
        title: "万物互联产品"
    },
    {
        key: "3",
        title: "物联网大数据平台"
    },
    {
        key: "4",
        title: "智慧城市解决方案"
    },
]
const cardDatas: CardData[] = [
    {
        dataIndex: "smart-light",
        title: "智慧照明管控平台",
        desc: "运用物联网、移动互联网、云计算等新一代信息技术，建立智慧城市照明管理平台，实现基于GIS的远程监控、节能分析和路灯业务全方位的信息化管理，实现照明节能科学化、故障监测自动化、路灯控制可视化、辅助决策智能化。全面提升城市路灯管理水平，节省电力资源，节约路灯设施运维成本，创新路灯管理模式。",
        tags: ["照明控制", "信息发布", "实时监测", "数据展示", "统计分析", "预警管理"]
    },
    {
        dataIndex: "smart-park",
        title: "智慧园区管理平台",
        desc: "主要应用于智慧园区的实战指挥平台，以实现场景感知、城市管理、实时预警、多种物联网设备管理等功能，最终提高管理、服务决策的智能化水平。",
        tags: ["场景感知", "通行管理", "实时预警", "数据展示", "统计分析", "预警管理"]
    },
    {
        dataIndex: "smart-stop",
        title: "智慧停车管理平台",
        desc: "合理规划和管理市区停车场和停车位，全域停车一体化管理、智能物联设备监控、统一清分结算、停车大数据分析、互联网精准营销等服务。",
        tags: ["远程监督", "信息采集", "数据分析", "报表统计", "统计分析", "预警管理"]
    },
    {
        dataIndex: "smart-urban",
        title: "智慧城管管理平台",
        desc: "利用大数据、物联网、BIM+GIS等先进技术，建成汇聚全量实时资源的交通运输大数据仓库，研发交通运行监测与应急指挥平台、交通运输安全监管平台、基础设施安全监测系统、公路智能养护管理系统等应用软件，实现对交通运行态势的感知和分析，支撑城市行业监管、公路养护、应急指挥等日常业务。",
        tags: ["信息采集", "运行监督", "态势分析", "应急指挥", "统计分析", "预警管理"]
    }
]
export default function SmartCity() {
    const [actEle, setActEle] = useState<number>()
    function classNameFn(index: number): string {
        if (actEle || actEle === 0) {
            if (index === actEle) {
                return "pt-10 h-[600px] w-[calc(25%+40px)]"
            }
            return "w-[calc((100%-25%-40px)/3)]"
        }
        return ""
    }
    return (
        <BasePage navOptions={{ theme: "light" }}>
            <div className='banner'>
                <img src="/src/assets/smart-city/inter-big-data/banner.png" alt="" />
            </div>
            <SmartCityTabs tabDatas={tabDatas} />
            <img src="/src/assets/smart-city/inter-big-data/pic1.jpg" alt="" />
            <div className='card-box bg-[#2e3346]'>
                <div className='container mx-auto h-[960px] lg:flex lg:items-center'>
                    {
                        cardDatas.map((data, index) => (
                            <Card key={data.title} cardData={data} className={classNameFn(index)} onMouseOut={() => setActEle(undefined)} onMouseMove={() => setActEle(index)} />
                        ))
                    }
                </div>
            </div>
            <img src="/src/assets/smart-city/inter-big-data/pic3.jpg" alt="" />
        </BasePage>
    )
}
